<template>
  <div id="classAndStyle">
    <div :class="{ active: isActive }">This is a div with class active</div>
    <div :class="classList1">
      This is a div with class active and text-danger
    </div>
		<div :class="[{ [activeClass]: hasError }, errorClass]">wqewqe</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const isActive = ref(true)
const hasError = ref(false)
const classList = ref({ active: true, 'text-danger': true })
const activeClass = ref('active')
const errorClass = ref('text-danger')
const classList1 = [activeClass.value, errorClass.value]

</script>
<style scoped>
.active {
  color: red;
}
.text-danger {
  color: green;
}
</style>
